import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:cached_network_image/cached_network_image.dart';

/// 电影详情页
/// 参考:https://www.jianshu.com/p/5aeeb7ea776b
class SampleFimDetails extends StatefulWidget {
  const SampleFimDetails({Key? key}) : super(key: key);

  @override
  _SampleFimDetailsState createState() => _SampleFimDetailsState();
}

class _SampleFimDetailsState extends State<SampleFimDetails> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
            pinned: true,
            delegate: SliverCustomHeaderDelegate(
                title: '哪吒之魔童降世',
                collasedHeight: 40,
                expandedHeight: 300,
                paddingTop: MediaQuery.of(context).padding.top,
                coverImgUrl:
                    'https://img.zcool.cn/community/01c6615d3ae047a8012187f447cfef.jpg@1280w_1l_2o_100sh.jpg')),
        SliverFillRemaining(
          child: FilmContent(),
        )
      ],
    );
  }
}

class FilmContent extends StatelessWidget {
  const FilmContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                    width: 130,
                    height: 180,
                    child: CachedNetworkImage(
                      imageUrl:
                          'https://img1.gamersky.com/image2019/07/20190725_ll_red_136_2/gamersky_07small_14_201972510258D0.jpg',
                      imageBuilder: (context, imageprovider) => Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              image: DecorationImage(
                                  image: imageprovider, fit: BoxFit.cover))),
                      placeholder: (context, url) => Container(
                        color: Color(0xFFD6D6D6),
                        child: Center(
                          child: SizedBox(
                            width: 30,
                            height: 30,
                            child: CircularProgressIndicator(
                              color: Colors.blueGrey,
                            ),
                          ),
                        ),
                      ),
                    )),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Container(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '哪吒之魔童降世',
                          style: TextStyle(
                            fontSize: 25,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF333333),
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          '动画/中国大陆/110分钟',
                          style: TextStyle(
                            fontSize: 15,
                            color: Color(0xFF999999),
                          ),
                        ),
                        SizedBox(
                          height: 2,
                        ),
                        Text(
                          '2019-07-26 08:00 中国大陆上映',
                          style: TextStyle(
                            fontSize: 15,
                            color: Color(0xFF999999),
                          ),
                        ),
                        SizedBox(
                          height: 2,
                        ),
                        Text(
                          '32.1万人想看/大V推荐度95%',
                          style: TextStyle(
                            fontSize: 15,
                            color: Color(0xFF999999),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
            Divider(
              height: 32,
            ),
            Text(
              "剧情简介",
              style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
                color: Color(0xFF333333),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Expanded(
              child: Text(
                '天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，'
                '灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，'
                '3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，'
                '灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一'
                '颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？'
                '他将何去何从？',
                style: TextStyle(
                  fontSize: 15,
                  color: Color(0xFF999999),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double collasedHeight;
  final double expandedHeight;
  final double paddingTop;
  final String coverImgUrl;
  final String title;
  String statusBarMode = 'dark';

  SliverCustomHeaderDelegate(
      {this.collasedHeight = 80,
      this.expandedHeight = 120,
      this.paddingTop = 0,
      this.coverImgUrl = "",
      this.title = ""});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    this.updateStatusBarBrightness(shrinkOffset);
    return Container(
      height: this.maxExtent,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            // 背景图
            child: CachedNetworkImage(
              imageUrl: coverImgUrl,
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(
                color: Color(0xFFD6D6D6),
                child: Center(
                  child: SizedBox(
                    width: 30,
                    height: 30,
                    child: CircularProgressIndicator(
                      color: Colors.blueGrey,
                    ),
                  ),
                ),
              ),
            ),
          ),
          // 收起头部
          Positioned(
              left: 0,
              right: 0,
              top: 0,
              child: Container(
                // 背景颜色
                color: this.makeStickyHeaderBgColor(shrinkOffset),
                child: SafeArea(
                  bottom: false,
                  child: Container(
                    height: this.collasedHeight,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        // 返回按钮
                        IconButton(
                          onPressed: () {},
                          icon: Icon(Icons.arrow_back_ios),
                          color: this
                              .makeStickyHeaderTextColor(shrinkOffset, true),
                        ),
                        // 标题
                        Text(
                          this.title,
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w500,
                              color: this.makeStickyHeaderTextColor(
                                  shrinkOffset, false)),
                        ),
                        // 分享按钮
                        IconButton(
                          onPressed: () {},
                          icon: Icon(Icons.share),
                          color: this
                              .makeStickyHeaderTextColor(shrinkOffset, true),
                        )
                      ],
                    ),
                  ),
                ),
              ))
        ],
      ),
    );
  }

  @override
  double get maxExtent => this.expandedHeight;

  @override
  double get minExtent => this.collasedHeight + this.paddingTop;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      true;

  makeStickyHeaderBgColor(double offset) {
    final int alpha = (offset / (this.maxExtent - this.minExtent) * 255)
        .clamp(0, 255)
        .toInt();
    return Color.fromARGB(alpha, 255, 255, 255);
  }

  makeStickyHeaderTextColor(double offset, bool isIcon) {
    if (offset <= 50) {
      return isIcon ? Colors.white : Colors.transparent;
    } else {
      final int alpha = (offset / (this.maxExtent - this.minExtent) * 255)
          .clamp(0, 255)
          .toInt();
      return Color.fromARGB(alpha, 0, 0, 0);
    }
  }

  void updateStatusBarBrightness(double offset) {
    if (offset > 50 && this.statusBarMode == 'dark') {
      this.statusBarMode = 'light';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarBrightness: Brightness.light,
          statusBarIconBrightness: Brightness.light));
    } else if (offset <= 50 && this.statusBarMode == 'light') {
      this.statusBarMode = 'dark';
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarBrightness: Brightness.dark,
          statusBarIconBrightness: Brightness.dark));
    }
  }
}
